<template>
  <div class="cart py-container">
    <!--主内容-->
    <div class="checkout py-container  pay">
      <div class="checkout-tit" style="width: 1050px; margin: 0 auto; padding: 10px 0;">
        <h4 class="fl tit-txt"><span class="success-info">支付申请提交成功，请您及时付款！订单号：{{ payObj.out_trade_no }}</span>
        </h4>
        <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{ payObj.total_fee/100 }}</em></span>
        <div class="clearfix"/>
      </div>
      <div class="checkout-steps">
        <div class="fl weixin">微信支付</div>
        <div class="fl sao">
          <div class="fl code">
            <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
            <qriously :value="payObj.code_url" :size="338"/>
          </div>
          <div style="color: red; text-align:center;">请使用微信扫一扫</div>
        </div>
        <div class="clearfix"/>
        <!-- <p><a href="pay.html" target="_blank"> 其他支付方式</a></p> -->
      </div>
    </div>

  </div>
</template>
<script>
import storage from '~/utils/storage'
import tradeApi from '~/api/trade'
export default {
  data() {
    return {
      timer: {},
      payObj: {
        code_url: ''// 避免页面初始化渲染时报错
      }
    }
  },
  mounted() {
    // 使用订单id获取二维码
    tradeApi.getCodeUrl(this.$route.params.id, storage.get('GULI-TOKEN'))
      .then(r => {
        // this.$message.success('获取二维码成功')
        // 获取二维码生成二维码图片显示
        this.payObj = r.data // 获取r对象的data map赋值给payObj
        // 开启定时任务：每过2秒查询一次订单的支付状态
        this.timer = setInterval(() => {
          tradeApi.getPayStatus(this.$route.params.id, storage.get('GULI-TOKEN'))
            .then(r => {
              if (r.data.status === '1') {
                clearInterval(this.timer)// 停止定时任务
                this.$message.success('恭喜你，支付成功')
                // 已支付
                this.$router.push('/course/' + r.data.courseId)
              }
            })
        }, 2000)
      })
  },
  destroyed() {
    // vue对象销毁前关闭定时任务
    clearInterval(this.timer)
  }
}
</script>
